<template>
  <div class="login">
    <Row type="flex" justify="center" align="middle" @keydown.enter.native="submitLogin">
      <Col style="width: 368px;">
        <Header />
        <Row>
          <Form ref="LoginForm" :model="form" :rules="rules" class="form">
            <FormItem prop="username">
              <Input
                v-model="form.username"
                prefix="ios-contact"
                size="large"
                clearable
                placeholder="请输入用户名"
                autocomplete="off"
              />
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                v-model="form.password"
                prefix="ios-lock"
                size="large"
                clearable
                placeholder="请输入密码"
                autocomplete="off"
              />
            </FormItem>
          </Form>

          <Row type="flex" justify="space-between">
            <Checkbox v-model="saveLogin" size="large">{{ $t('autoLogin') }}</Checkbox>
          </Row>
          <Row>
            <Button
              class="login-btn"
              type="primary"
              size="large"
              :loading="loading"
              @click="submitLogin"
              long
            >
              <span v-if="!loading">{{ $t('login') }}</span>
              <span v-else>{{ $t('logining') }}</span>
            </Button>
          </Row>
        </Row>
        <Footer />
      </Col>
      <LangSwitch />
    </Row>
  </div>
</template>

<script>
import { login, userInfo, getMenuNav } from "@/api/index";
import { validateMobile } from "@/libs/validate";
import Cookies from "js-cookie";
import Header from "@/views/main-components/header";
import Footer from "@/views/main-components/footer";
import LangSwitch from "@/views/main-components/lang-switch";
import util from "@/libs/util.js";
export default {
  components: {
    LangSwitch,
    Header,
    Footer
  },
  data() {
    return {
      error: false,
      tabName: "username",
      saveLogin: true,
      loading: false,
      errorCode: "",
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          {
            required: true,
            message: "账号不能为空",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submitLogin() {
      this.$refs.LoginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          login({
            username: this.form.username,
            password: this.form.password,
            saveLogin: this.saveLogin
          }).then(res => {
            if (res.code == 0) {
              this.setStore("token", res.token);

              userInfo().then(res => {
                if (res.code == 0) {
                  if (this.saveLogin) {
                    // 保存7天
                    Cookies.set("userInfo", JSON.stringify(res.data), {
                      expires: 7
                    });
                  } else {
                    Cookies.set("userInfo", JSON.stringify(res.data));
                  }
                  this.setStore("userInfo", res.data);
                  this.setStore("loginName", this.form.username);
                  this.setStore("deptId", res.data.deptId);
                  this.$store.commit("setAvatarPath", "");
                  this.setStore("saveLogin", this.saveLogin);

                  // 加载菜单
                  util.initRouter(this);
                  this.$router.push({
                    name: "home_index"
                  });
                } else {
                  this.loading = false;
                }
              });

              //  if (this.saveLogin) {
              //       // 保存7天
              //       Cookies.set("userInfo", JSON.stringify(res.data), {
              //         expires: 7
              //       });
              //     } else {
              //       Cookies.set("userInfo", JSON.stringify(res.data));
              //     }
              //     this.setStore("userInfo", res.data);
              //     this.$store.commit("setAvatarPath", res.data.avatar);
              // 获取用户信息
              // userInfo().then(res => {
              // if (res.code==0) {
              //   // 避免超过大小限制
              //   delete res.result.permissions;
              //   let roles = [];
              //   res.result.roles.forEach(e => {
              //     roles.push(e.name);
              //   });
              //   this.setStore("roles", roles);
              //   this.setStore("saveLogin", this.saveLogin);
              //  debugger;
              // 加载菜单
              // util.initRouter(this);
              // this.$router.push({
              //   name: "home_index"
              // });
              // } else {
              //   this.loading = false;
              // }
              // });
            } else {
              this.loading = false;
              this.$Message.error(res.msg);
            }
          });
        }
      });
    }
  },
  mounted() {}
};
</script>

<style lang="less">
@import "./login.less";
</style>
